import React, { Component } from 'react';
import {observer} from "mobx-react";
import  Mobx from  '../mobx'
import '../css/Detail.less'
import axios from  'axios'
import Comment from './Comment'
@observer class Detail extends Component {
    constructor(props) {
        super(props)
        this.state = {
            Data: {},
            DataStyle: '',
            Message: {},
            guanzhu: false,
            imgs:[],
            imgIndex:null,
            in:'',
            leave:'',
            imgIndexSon:null
        }
    }
    componentDidMount(){
        console.log(this.props)
        Mobx.history= this.props.history
        axios.get('http://www.niuduxiu.com/creativity/findById.jhtml?id='+this.props.match.params.id)
            .then((item)=>{
                this.setState({
                    Data:item.data.creativity,
                    DataStyle:item.data.creativityType
                },()=>{
                    this.getMessage();
                    this.getImgs();
                })
            })
    }
    getMessage(){
        axios.get('http://www.niuduxiu.com/member/getmember.jhtml?id='+this.state.Data.memberId)
            .then((item)=>{
                this.setState({
                    Message:item.data
                })
            })
    }
    getImgs(){
        axios.get('http://www.niuduxiu.com/creativity/findxingxiimage.jhtml?id='+this.state.Data.id)
            .then((item)=>{
                this.setState({
                    imgs:item.data
                })
            })
    }
    Time(item){
        let time=new Date(item)
        return time.getFullYear()+'-'+(this.zero(parseInt(time.getMonth())+1)) +'-'
            +(this.zero(time.getDate()))+' '+(this.zero(time.getHours()))+":"+this.zero(time.getMinutes())+':'+this.zero(time.getSeconds());
    }
    zero(item){
        if(parseInt(item)<10){
            return "0"+item
        }else{
            return item;
        }
    }
    ontouchstart(e){
        this.setState({
            in:e.targetTouches[0].screenX
        })
    }
    ontouchmove(e){
        this.setState({
            leave:e.targetTouches[0].screenX
        })
    }
    ontouchend(e){
        setTimeout(()=>{
            if(this.state.in<this.state.leave&&this.state.leave-this.state.in>50&&this.state.leave!==null){
                if(this.state.imgIndex==this.state.imgs.length-1){
                    this.setState({
                        in:0,
                        leave:null,
                        imgIndex:0
                    })
                }else{
                    this.setState({
                        in:0,
                        leave:null,
                        imgIndex:this.state.imgIndex+1
                    })
                }
            }else if(this.state.in>this.state.leave&&this.state.leave-this.state.in<-50&&this.state.leave!==null){
                if(this.state.imgIndex==0){
                    this.setState({
                        in:0,
                        leave:null,
                        imgIndex:this.state.imgs.length-1
                    })
                }else{
                    this.setState({
                        in:0,
                        leave:null,
                        imgIndex:this.state.imgIndex-1
                    })
                }
            }
        },100)
    }
    ChangeIndex(index){
        this.setState({
            imgIndex:index
        })
    }
    HideIndex(){
        this.setState({
            imgIndex:null
        })
    }
    ChangeIndexSon(index){
        this.setState({
            imgIndexSon:index
        })
    }
    HideIndexSon(){
        this.setState({
            imgIndexSon:null
        })
    }
    toMy(item){
        this.props.history.push('/Index/'+item.id)
    }
    render() {
        let item=''
        if(this.state.Data.copyright==0){
            item='禁止匿名转载；禁止商业使用；禁止个人使用。'
        }else if(this.state.Data.copyright==1){
            item='禁止匿名转载；禁止商业使用；禁止个人使用。'
        }else{
            item='作品是开源的'
        }
        return (
            <div className="Detail">
                <div className='HeadPic'>
                    <div className='left'>
                        <img src={this.state.Message.headPic} onClick={this.toMy.bind(this,this.state.Message)}  alt=""/>
                    </div>
                    <div className='right'>
                        <p>{this.state.Message.username} <span>{this.state.guanzhu?'取消关注':'关注'}</span> </p>
                    </div>
                </div>
                <div className='ZuopinShuxing'>
                    <p className='titleName'>{this.state.Data.titleName} <span>{this.Time(this.state.Data.createDate)}</span> </p>
                    <p className='StyleName'>{this.state.DataStyle}</p>
                    <p className='caozuo'>
                        <i><img src={require('../img/zan.png')} alt=""/></i>
                        <span>{this.state.Data.browseCount}</span>
                        <i><img src={require('../img/zan.png')} alt=""/></i>
                        <span>{this.state.Data.browseCount}</span>
                        <i><img src={require('../img/zan.png')} alt=""/></i>
                        <span>{this.state.Data.browseCount}</span>
                        <span className='right'>{this.state.guanzhu?'取消收藏':'收藏'}</span>
                    </p>
                </div>
                <div className='Reading'>
                    <p>{this.state.Data.reading}</p>
                    <p>所有作品已做版权保护：{item}</p>
                </div>
                <div className='Imgs'>
                    {
                        this.state.imgs.map((item,index)=>{
                            return(
                                <span key={index}>
                                    <img src={item.imageUrl} alt="" onClick={this.ChangeIndex.bind(this,index)} />
                                    <p>{item.imageNote}</p>
                                </span>
                            )
                        })
                    }
                </div>
                <div className='Zan'>
                    <span>
                        <img src={require('../img/zan.png')} alt=""/>
                        <p>{this.state.Data.browseCount}</p>
                    </span>
                </div>
                <div className='kongbai'></div>
                <div className='hover' style={{display:this.state.imgIndex===null?'none':'block'}}>
                    {
                        this.state.imgs.map((item,index)=>{
                            return(
                                <div  style={{display:this.state.imgIndex==index?'block':'none'}}  key={index}>
                                    <img src={item.imageUrl} alt=""  onClick={this.ChangeIndexSon.bind(this,item.imageUrl)} onTouchStart={this.ontouchstart.bind(this)} onTouchEnd={this.ontouchend.bind(this)} onTouchMove={this.ontouchmove.bind(this)} />
                                </div>
                            )
                        })
                    }
                    <span onClick={this.HideIndex.bind(this)} className='X'><span>X</span>  </span>
                </div>
                <div className='hoverSon' style={{display:this.state.imgIndexSon===null?'none':'block'}}>
                    <img src={this.state.imgIndexSon} alt="" onClick={this.HideIndexSon.bind(this)} />
                </div>
                <Comment id={this.state.Data.id}/>
            </div>
        )
    }
}

export default Detail;
